<template>
  <div id="workList" class="wrapper" style="overflow-x: auto;">
    <el-form class="ur-form" :inline="true" ref="switchForm" style="height: 54px;min-width: 1145px;">
      <el-form-item label="状态" >
        <el-select class="w150" size="small" v-model="form.state">
          <el-option label="全部" :value="-1"></el-option>
          <el-option v-for="(item,index) in global.WorkResults" :key="index" :label="item" :value="index" v-if="item!=''&&index!=10&&index!=11"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="" class="ml-1">
        <el-date-picker v-model="times" style="width: 250px;" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      </el-form-item>
      <el-form-item label="" class="ml-1">
        <el-input  placeholder="请输入内容" v-model="form.content" size="small" class="input-with-select w300 ml-1">
          <el-select v-model="searchType"  slot="prepend" size="small" placeholder="请选择" class="w110 ur-select">
            <el-option label="工单流水" :value="1"></el-option>
            <el-option label="工单内容" :value="2"></el-option>
            <el-option label="工单号码" :value="3"></el-option>
            <el-option label="责任区" :value="4"></el-option>
            <el-option label="创建人" :value="5"></el-option>
            <el-option label="处理人" :value="6"></el-option>
          </el-select>
          <el-button :disabled="false" slot="append"  class="ur-btn ur-btn-primary" @click="currentPage=1,queryWork()"><i class="iconfont icon-search"></i>查询</el-button>
        </el-input>
      </el-form-item>
      <el-button v-if="userType==0" class="d-inline-block ur-btn ur-btn-primary " @click="workAdd"><i class="iconfont icon-add"></i>新增工单</el-button>
<!--      <el-button v-if="userType==0" class="d-inline-block ur-btn ur-btn-primary ml-0 " @click="batchDialog=true"><i class="iconfont icon-upload"></i>导入工单</el-button>-->
      <el-button class="d-inline-block ur-btn ur-btn-primary ml-0 " @click="exportWork"><i class="iconfont icon-dowload"></i>导出工单</el-button>
    </el-form>
    <!--表格-->
    <el-table class="ur-table" ref="tableDom1" stripe :data="getGidData" style="min-width: 1145px;" :height="clientHeight-203>400?clientHeight-203:400" highlight-current-row @row-click="rowClick" @selection-change="selsChange">
      <el-table-column type="selection" width="40" align="center"></el-table-column>
      <el-table-column align="center" type="index" :index="indexMethod" label="序号" width="40"></el-table-column>
      <el-table-column v-for="(v,index) in tables.columns" :prop="v.field" :label="v.title" :min-width="v.width" align="center" :key="index">
        <template slot-scope="scope">
          <!--工单状态-->
          <span v-if="v.field=='status'">{{global.WorkStatus[scope.row[v.field]+1]}}</span>
          <!--工单分类-->
          <span v-else-if="v.field=='Classify'">{{global.WorkTypes[scope.row[v.field]]}}</span>
          <!--级别-->
          <label v-else-if="v.field=='Level'">
            <span class="d-flex align-items-center" v-if="scope.row[v.field]==1"><i class="circle error"></i>紧急</span>
            <span class="d-flex align-items-center" v-else-if="scope.row[v.field]==2"><i class="circle warning"></i>次紧急</span>
            <span class="d-flex align-items-center" v-else="scope.row[v.field]==3"><i class="circle info"></i>普通</span>
          </label>
          <!--短信发送状态-->
          <span v-else-if="v.field=='SmsState'">
            <template v-if="scope.row.SmsState===0">发送成功</template>
            <template v-else-if="scope.row.SmsState===1">发送失败</template>
            <template v-else></template>
          </span>
          <span v-else-if="v.field=='DevNo'">{{scope.row.DevNo==0?'':scope.row.DevNo}}</span>
          <!--信息来源WorkSources-->
          <span v-else-if="v.field=='Source'">
            <template v-for="item in global.FaultSources" v-if="scope.row[v.field]==item.no">{{item.name}}</template>
            <!--            {{global.FaultSources[scope.row[v.field]-1]}}-->
          </span>
          <!--开始时间 结束时间 formatDate(new Date(scope.row[v.field]),'yyyy-MM-dd')-->
          <span v-else-if="v.field=='StartTime'">{{scope.row[v.field]}}</span>
          <span v-else-if="v.field=='EndTime'" :class="{'text-danger':markEndTime(scope.row.EndTime)}">{{scope.row[v.field]}}</span>
          <!--阅读情况-->
          <span v-else-if="v.field=='AssignedUserReaded'" :class="{'text-success':scope.row[v.field]}">{{scope.row[v.field]?'已读':'未读'}}</span>
          <!--处理结果-->
          <span v-else-if="v.field=='WorkOrderState'">{{global.WorkResults[scope.row[v.field]]}}</span>
          <span v-else-if="v.field=='Content'">
              <template >{{scope.row.Content}}</template>
          </span>
          <!--其他-->
          <span v-else>{{scope.row[v.field]}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="80">
        <template slot="header" slot-scope="scope">
          <label>详情/操作</label>
        </template>
        <template slot-scope="scope">
          <!--公用署 已处理、申请延期、无法处理、非我所-->
          <el-button  class="ur-btn ur-btn-primary" v-if="userType==0&&[0,3,4,6,7].indexOf(scope.row['WorkOrderState'])!=-1" @click="operateFun(scope.row)">
            <i class="iconfont icon-caozuo"></i>操作
          </el-button>
          <!--公用署 非我组、待指派、待处理  查看-->
          <el-button class="ur-btn ur-btn-primary" v-if="userType==0&&[1,2,8].indexOf(scope.row['WorkOrderState'])!=-1" @click="operateFun(scope.row)">
            <i class="iconfont icon-xianshi"></i>查看
          </el-button>

          <!--养护单位 非我组、待指派、待处理-->
          <el-button class="ur-btn ur-btn-primary" v-if="userType==1" @click="operateFun(scope.row)">
            <template v-if="[3,4,6].indexOf(scope.row['WorkOrderState'])!=-1">
              <i class="iconfont icon-xianshi"></i>查看
            </template>
            <template v-if="[1,2,8].indexOf(scope.row['WorkOrderState'])!=-1">
              <i class="iconfont icon-yunweizhongxin"></i>处理
            </template>
          </el-button>
        </template>
      </el-table-column>
      <!--特殊操作-->
      <el-table-column align="center" width="100" v-if="userType==0">
        <template slot="header" slot-scope="scope">
          <label>特殊操作</label>
        </template>
        <template slot-scope="scope">
          <el-button class="ur-btn ur-btn-waring d-inline-block">
            <i class="font18 iconfont icon-edit mr-0" @click="handleEdit(scope.row)"></i>
          </el-button>
          <el-button class="ur-btn ur-btn-danger d-inline-block">
            <i class="font18 iconfont icon-delete mr-0" @click="handleDel(scope.$index,scope.row)"></i>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <div class="mt-3">
      <el-button v-if="userType==0" class="float-left" type="danger" @click="batchRemove" :disabled="sels.length===0">批量删除</el-button>
      <el-pagination size="small" class="float-right " @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     layout="total, sizes, prev, pager, next, jumper" :page-sizes="[100,200,500,1000]"
                     :current-page="currentPage" :page-size="pageSize" :total="total"></el-pagination>
    </div>
    <!--添加工单-->
    <el-dialog class="ur-form-dialog" v-el-drag-dialog :title="dialogTitle" :visible.sync="showWorkAdd" width="824px" @close="showWorkAdd=false">
      <template v-if="showWorkAdd">
        <work-add :work="workSel" :workEdit="workEdit" @receiptDialog="receiptDialog($event)" @workAddDialog="workAddDialog"></work-add>
      </template>
    </el-dialog>

    <!--审核-->
    <el-dialog class="ur-form-dialog" v-el-drag-dialog :title="dialogTitle" :visible.sync="showWorkDeal" width="1300px"  @close="showWorkDeal=false,queryWork()">
      <template v-if="showWorkDeal">
        <work-deal :work="workSel" @receiptDialog="receiptDialog($event)"></work-deal>
      </template>
    </el-dialog>

    <!--添加或查看回执详情-->
    <el-dialog class="ur-form-dialog" v-el-drag-dialog :title="dialogTitle" :visible.sync="showReceipt" width="820px" @close="showReceipt=false">
      <template v-if="showReceipt">
        <receipt-add :work="workSel" :receipt="receipt" @receiptDialog="receiptDialog($event)" :isAdd="isAddReceipt"></receipt-add>
      </template>
    </el-dialog>

    <!--批量导入-->
    <el-dialog class="ur-form-dialog" v-el-drag-dialog title="批量导入工单" :visible.sync="batchDialog" width="450px" top="15%" :close-on-click-modal="false">
      <div class="p-4" v-if="batchDialog">
        <div class="mb-3">
          <label class="text-right w100">选择导入文件：</label>
          <input type="file" style="line-height: 20px;" accept=".rar" @change="changeFiles">
        </div>
        <p class="text-danger mb-3" style="line-height: 20px;">注意:只支持城运平台导出的工单rar文件导入</p>
        <div class="d-flex align-items-center justify-content-center">
          <!--          <el-button class="ur-btn ur-btn-primary" @click="downloadFile"><i class="iconfont icon-export"></i>下载模板</el-button>-->
          <el-button class="ur-btn ur-btn-primary" @click="saveBatchWork"><i class="iconfont icon-sure"></i>确定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script type="text/ecmascript-6">
  import {mapState} from 'vuex'
  import api from 'api/api'
  import fetch from 'api/fetch'
  import workAdd from './work-add'
  import workDeal from './work-deal'
  import receiptAdd from './receipt-add'
  import elDragDialog from 'directive/el-dragDialog'

  export default {
    directives:{elDragDialog},
    components: {workAdd, workDeal, receiptAdd},
    props: {},
    data() {
      return {
        total: 0,
        currentPage: 1,
        pageSize:100,
        searchType:1,
        searchTxt:'',
        tables: {
          sel: null,//选中行
          columns: [
            {field: "No", title: "工单流水", width: '120'},
            {field: "Level", title: "级别", width: '60'},
            {field: "Content", title: "工单内容", width: '380'},
            {field: "DevNo", title: "设施编号", width: null},
            {field: "Classify", title: "工单分类", width: '80'},
            {field: "AreaName", title: "责任区", width: null},
            {field: "Source", title: "信息来源", width: '100'},
            {field: "SmsState", title: "短信状态", width: '70'},
            // {field: "moreInfo", title: "更多详情", width: '84'},
            {field: "StartTime", title: "派遣时间", width: '150'},
            {field: "EndTime", title: "办理时限", width: '150'},
            {field: "AssignedUserReaded", title: "阅读情况", width: '70'},
            {field: "WorkOrderState", title: "处理结果", width: '80'},
          ],
          data: []
        },
        sels:[],
        form:{state:-1,level:-1,type:-1,source:-1,content:''},
        acceptArea:1,
        acceptUser:1,
        showWorkAdd:false,
        showAcceptArea:false,
        showAcceptUser:false,
        showWorkDeal:false,
        showReceipt:false,
        isAddReceipt:0,
        workEdit:false,
        workSel:{},
        dialogTitle:'新增工单',
        receipt:{},
        times:'',
        btnState:false,
        batchDialog:false,
        formData:new FormData(),
      }
    },
    watch: {},
    computed: {
      getGidData() {
        return this.tables.data.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
      },
      ... mapState({
        clientHeight: state => state.comm.clientHeight,
        clientWidth: state => state.comm.clientWidth,
        userType:state=>state.user.userInfo.RoleType,
        limits:state=>state.user.userInfo.limits
      }),
    },
    methods: {
      exportWork(){
        let data = {state: this.form.state, level: this.form.level, type: this.form.type,
          source: this.form.source, qType: this.searchType, content: this.form.content,sdate: this.times?this.times[0]:'', edate: this.times?this.times[1]:''}
        api.fetchFile('/SHWorkorder/QueryWorks_Export',data)
            .then(r => {
              fetch.saveFile(r,'待办工单',this.times)
            })
      },
      downloadFile(){
        window.open(api.ajaxServe+'工单批量导入.xlsx')
      },
      changeFiles(){
        let files=event.target.files
        for(let i=0;i<files.length;i++){
          this.formData.append('file',files[i])
        }
      },
      saveBatchWork(){
        if(this.formData.get('file')){
          api.httpFormData('/SHWorkorder/BatchInsert',this.formData)
              .then(r=>{
                this.$message.success({showClose:true,message:'批量导入成功'})
                this.search()
                this.batchDialog=false
              })
        }else {
          this.$message.warning({showClose:true,message:'未选择文件'})
        }
      },
      markEndTime(eTime){
        let total = new Date(api.formatDate(new Date(),'yyyy-MM-dd')) - new Date(api.formatDate(eTime,'yyyy-MM-dd'))
        if(total>0){
          return true
        } else{
          return false
        }
      },
      indexMethod(index) {
        return index + 1
      },
      formatDate(value,type){
        return api.formatDate(value,type)
      },
      handleSizeChange(val) {
        this.pageSize = val
      },
      handleCurrentChange(val) {
        this.currentPage = val
      },
      rowClick(row, event, column){},
      selsChange(sels) {
        this.sels = sels
        this.sels.splice(0, 0)
      },
      //更多详情
      workInfo(row){},
      handleEdit(row){
        this.workSel=row
        this.workEdit=true
        this.showWorkAdd=true
        this.dialogTitle='特殊操作'
      },
      handleDel(index,row){
        this.$confirm('确认删除该记录吗', '提示', {type: 'warning'})
            .then(() => {
              api.fetchSimple('/SHWorkorder/DelWorks',{ids:[row.Id]})
                  .then(r=>{
                    if(r!=''){
                      this.$message.success('删除成功')
                      this.tables.data.splice(index, 1)
                    }
                  })
            })
      },
      batchRemove() {
        let ids=[]
        this.sels.map(r=>{
          ids.push(r.Id)
        })
        this.$confirm('确认删除选中记录吗？', '提示', {type: 'warning'})
            .then(() => {
              api.fetchSimple('/SHWorkorder/DelWorks',{ids:ids})
                  .then(r=>{
                    if(r!=''){
                      this.$message.success('删除成功')
                      this.currentPage=1
                      this.queryWork()
                    }
                  })
            })
      },
      queryWork(){
        this.loading=true
        let data = {state: [this.form.state], level: this.form.level, type: this.form.type,
          source: this.form.source, qType: this.searchType, content: this.form.content,sdate: this.times?this.times[0]:'', edate: this.times?this.times[1]:''}
        this.btnState = true
        api.fetchSimple('/SHWorkorder/QueryWorks',data)
            .then(r => {
              this.btnState = false
              this.tables.data = r||[]
              this.total = r.length||0
            })
      },
      workAdd(){
        this.dialogTitle='新增工单'
        this.workSel={Classify:1,Source:1,Level:1,AssignedAreaId:'',AssignedUserId:''}
        this.workEdit=false
        this.showWorkAdd=true
      },
      operateFun(row){
        this.workSel=row
        this.showWorkDeal=true
        this.dialogTitle=[1,2].includes(this.workSel.WorkOrderState)?'处理操作':'审核操作'
      },
      receiptDialog(v){
        this.queryWork()
        if(!this.workEdit&&!this.showWorkAdd){
          this.showWorkDeal = v.showWorkDeal
        }
        this.showReceipt = v.showReceipt
        this.isAddReceipt = v.isAdd
        this.receipt = v.receipt
      },
      workAddDialog(){
        this.showWorkAdd=false
        this.queryWork()
      }
    },
    created() {
      this.queryWork()

    },
    mounted() {
    },
    activated(){
    }
  }
</script>
<style lang="stylus" rel="stylesheet/stylus">
  #workList .el-table .cell{padding-left: 0px !important;padding-right: 0px !important; }
</style>
